<!--后结算--日清--应收单列表 -->
<template>
  <div class="nissin-list-box">
    <el-container class="template-box">
      <!-- tab搜索 -->
      <tabs
        is-new-tabs
        :tabs-arr="indexTabsArr"
        @returnIndex="tabsHandle" />
      <!-- 搜索 -->
      <el-header height="auto">
        <SearchForm
          label-width="80px"
          :data="indexSearchData"
          @searchForm="searchForm"
          @resetForm="resetForm"
          :submit-loading='submitLoading'
        />
      </el-header>
      <!-- 列表 -->
      <el-editable
        v-loading="submitLoading"
        :data="dataList"
        height="400"
        :columns="indexTableData"
      >
        <!-- 发票影像 -->
        <template
          slot="default-invoicePng"
          slot-scope="scope">
          <div style="display:flex; justify-content: center;">
            <el-image
              v-if="scope.row.invoiceUrl"
              @click="toLookDetails(scope.row)"
              style="width: 23px; height: 16.6px;"
              :src="imageicon"/>
          </div>
        </template>
        <!-- 操作 -->
        <!-- 开票订单状态（1-待推送；2-已推送；3-已开票；4-验票完成；5-已撤销） -->
        <template
          slot="default-action"
          slot-scope="scope">
          <el-button
            size="small"
            @click.stop="toDetails(scope.row)"
            type="text text-primary">详情</el-button>
        </template>
      </el-editable>
      <!-- 分页模块 -->
      <pagination
        ref="page"
        :request-func="getList"
        @returnData="getTableData"
      />
      <invoice-details
        :display-or-not="displayOrNotDetails"
        :invoice-url="activeInvoiceUrl"
        :busness-type="1"
        :invoice-no="activeInvoiceNo"
        @cancelDialog="cancelDialog" />
    </el-container>
  </div>
</template>

<script>
import { indexSearchData, indexTableData, indexTabsArr } from './const'
import { hasIn, cloneDeep } from 'lodash'
import SearchForm from '@components/businesscomponents/search'
import ElEditable from '@components/el-editable'
import Pagination from '@components/custom-pagination'
import tabs from '@components/tabs/index.vue'
import InvoiceDetails from '@/moduleComponents/beforeSettle/invoiceDetails'
import {
  pssReceiptStatusCount,
  quaryPssReceiptList
} from '@const/beforeSettleApi'
export default {
  components: { ElEditable, SearchForm, tabs, Pagination, InvoiceDetails },
  data () {
    return {
      imageicon: require('@assets/icon/beforeSettle/imageicon.png'),
      // 查看发票详情
      displayOrNotDetails: false,
      activeInvoiceUrl: '',
      activeInvoiceNo: '',
      readPath: '/distributorSide/salesManagement/common/invoiceDetails',
      // 搜索标题字段
      indexSearchData,
      // 搜索返回内容
      searchData: {},
      // 表格loading
      tableLoading: false,
      // 列表数据
      dataList: [],
      // 列表表头
      indexTableData,
      // tab字段
      indexTabsArr: cloneDeep(indexTabsArr),
      submitLoading: false,
      tabIndex: 1
    }
  },
  mounted () {
    this.getNumber()
  },
  methods: {
    // 查看发票详情
    toLookDetails (val) {
      this.activeInvoiceUrl = val.invoiceUrl
      this.activeInvoiceNo = val.invoiceNo
      this.displayOrNotDetails = true
    },
    cancelDialog () {
      this.activeInvoiceUrl = ''
      this.activeInvoiceNo = ''
      this.displayOrNotDetails = false
      this.$refs.page.Refresh()
    },
    // 获取列表
    getList () {
      this.submitLoading = true
      const body = {
        ...this.searchData,
        orderBussStatus: this.tabIndex,
        ...this.$refs.page.page
      }
      return this.$axios.$post(quaryPssReceiptList, body)
    },
    // 获取列表数据
    getTableData (data) {
      this.dataList = data || []
      this.submitLoading = false
    },
    // tabs切换处理事件
    tabsHandle (index) {
      this.tabIndex = this.indexTabsArr[index].val || ''
      this.$refs.page.Refresh()
    },

    // 跳转详情
    toDetails (data) {
      // 已完成
      this.$router.push({
        path: this.readPath,
        query: {
          id: data.receiptPayId,
          invoiceNo: data.invoiceNo
        }
      })
    },
    // 获取订单数量
    async getNumber () {
      const res = await this.$axios.$get(pssReceiptStatusCount)
      let arr = hasIn(res, 'payload') ? res.payload : []

      const cloneIndexTabs = cloneDeep(indexTabsArr)
      let allCount = null // 全部的数量
      arr.forEach(item => {
        allCount += item.orderCount
      })

      // 获取对应tab值
      cloneIndexTabs.forEach(item => {
        arr.forEach(ite => {
          if (ite.orderStatus === item.val) {
            item.badge = { value: ite.orderCount || null }
          }
        })
      })
      cloneIndexTabs[2].badge.value = allCount // 给“全部”加小红点
      // 全部数量
      // let allCount = cloneIndexTabs.reduce((pre, next) => {
      //   return pre + next.badge.value || 0
      // }, 0)
      // ;[...cloneIndexTabs].pop().badge.value = allCount || null
      this.indexTabsArr = cloneIndexTabs
    },

    // 搜索功能-点击查询
    searchForm (condition) {
      this.searchData = condition
      this.$refs.page.Refresh()
    },

    // 点击重置
    resetForm (condition) {
      this.searchData = condition
      this.$refs.page.Refresh()
    }
  }
}
</script>

<style lang="less" scoped>
@import '../m-front-common/pc/assets/var.less';
.nissin-list-box {
  background: @bgColor;
  .el-header {
    background: #fff;
    padding: 8px;
    margin-bottom: 8px;
  }
  .template-box {
    height: 100%;
    overflow: auto;
  }
}
</style>
